<template>
  <view class="wrapper">
  	 <swiper previous-margin="20px" :style="{height:height}" next-margin="20px" circular="true"> 
      <block v-for="(item,index) in imgUrls" :key="index">             
        <swiper-item>			
          <view class='box'>
              <image :src="item.image" class="img" @click="toCarouselSettingInfo(item)"></image>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    imgUrls: Array,
    height: {
      type: String,
      default: '220px'
    }
  },
  data () {
  	return {
    }
  },
  methods: {
    toCarouselSettingInfo (item) {
      this.$router.push({path: '/pages/index', query: {id: item.id}})
    }
  },
  computed: {
    style () {

    }
  }
}
</script>

<style>
.wrapper {
  width:100%;
  background-color: rgb(246,246,246);
}
swiper {
  width:100%;
}
.box{								 
  width: 100%;  
  display: inline-block;
  margin: 12px auto;
  box-sizing: border-box;
  text-align: center;
}
.box .img{
  width: 96%;
  border-radius: 10px;
  height: 350rpx
}

</style>